<template>
  <div class="divPosition">
    <input :disabled="disabled" :type="inputType" style=" padding-right:30px" :class="className" :value="currentValue"
           :placeholder="placeholder" @input="inputChanged($event)" @blur="blur()" @focus="focus($event)">
    <div class="divImgPosition" v-if="isclearButtonInput">
      <img src="../../assets/img/clearButton.png" @click="clearInput()">
    </div>
  </div>
</template>

<script>
export default {
  name: "EhbInputClear",
  props: ["disabled", "textName", "placeholder", "inputType", "className", "currentValue"],
  data() {
    return {
      isclearButtonInput: false
    }
  },
  methods: {
    //监听输入框事件
    inputChanged: function (event) {
      let that = this;
      let value = event.target.value;
      that.$emit('update:currentValue', value);
      //this.$emit("input", value); //将值放在自定义的事件函数中作为参数
      this.currentValue = value;
      if (value === null || typeof value === 'undefined' || value === "") {
        that.isclearButtonInput = false;
      } else {
        that.isclearButtonInput = true;
      }
    },
    //点击清空
    clearInput() {
      let that = this;
      that.isclearButtonInput = false;
      that.$emit("update:currentValue", "");
      that.currentValue = "";
    },
    //焦点失去
    blur() {
      let that = this;
      //document.body.scrollTop = document.documentElement.scrollTop = 0;
      setTimeout(function () {
        that.isclearButtonInput = false;
      }, 200)

    },
    focus(event) {
      let that = this;
      let value = event.target.value;
      if (value === null || typeof value === 'undefined' || value === "") {
        that.isclearButtonInput = false;
      } else {
        that.isclearButtonInput = true;
      }
    }
  }

}
</script>

<style scoped>
.divPosition {
  display: inline-block;
  position: relative;

}

.divImgPosition {
  position: absolute;
  right: 0.02rem;
  top: 0.042rem;
  cursor: pointer;
  display: none;
  background: rgba(249, 249, 251, 1);
  border-radius: 0.01rem;
  border: 0;
  outline: none;
  display: inline-block;
  line-height: 0.5rem;
  padding: 0.18rem 10px 0.18rem 0rem;
  display: flex;
  align-items: center;
}

.input {
  width: 6.30rem;
  height: 0.86rem;
  background: rgba(249, 249, 251, 1);
  border-radius: 0.04rem;
  border: 0;
  outline: none;
  display: inline-block;
  line-height: 0.5rem;
  padding: 0.18rem 0.3rem;
  display: flex;
  align-items: center;
}

.city {
  width: 3.5rem;
  height: 0.86rem;
  background: rgba(249, 249, 251, 1);
  border-radius: 0.04rem;
  border: 0;
  outline: none;
  display: inline-block;
  line-height: 0.5rem;
  padding: 0.18rem 0.3rem;
  display: flex;
  align-items: center;
}
</style>
